<!-- 首页组件 -->
<template>
  <div class="front-page-container">
    <!-- 主体内容区域 -->
    <div class="front-page">
      <!-- 商品展示子组件，通过cgoods传递商品数据，监听搜索事件 -->
      <GoodsSource2 :cgoods="goods" @handleSearch="handleSearch"></GoodsSource2>

      <!-- 分页组件，绑定分页参数并监听页码变化事件 -->
      <pagination
          @item-click="pageClick"
          :cUrl="url"
          :cTotal="total"
          :cPageSize="pageSize"
      ></pagination>
    </div>

    <!-- 右侧信息栏 -->
    <div class="right-info">
      <!-- 发布信息按钮，点击跳转至发布页面或登录页 -->
      <div class="free-btn">
        <img src="../../../assets/img/fabuxinxi2.png" @click="toPublish">
      </div>

      <!-- 近期热门信息区域 -->
      <div class="top-info">
        <!-- 标题 -->
        <div style="font-size:18px"><strong>近期热门信息</strong></div>

        <!-- 热门信息列表，循环渲染前10条数据，点击跳转详情页 -->
        <div
            class="item-info"
            v-for="(item, index) in goodsTopics"
            :key="index"
            @click="handleDetail(item)"
        >
          {{ index + 1 }}、{{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入接口方法和子组件
import {selectAllPage, selectGoodsPage} from "@/api/order";
import GoodsSource2 from "../../../components/good/GoodsSource2.vue";
import Pagination from "../../../components/Pagination.vue";

export default {
  data() {
    return {
      goods: [], // 商品列表数据
      goodsTopics: [], // 热门信息列表
      total: 0, // 总数据量
      pageSize: 30, // 每页显示数量
      url: "/order/All/", // 接口URL（用于分页组件标识）
      searchValue: '', // 搜索关键词
      // 初始化页码：从sessionStorage获取，不存在则默认1
      goodsCount2: sessionStorage.getItem("/order/All/pageCode")
          ? sessionStorage.getItem("/order/All/pageCode")
          : 1,
    };
  },

  mounted() {
    // 组件挂载后加载商品数据和热门信息
    this.getData();
    this.getTopicData();
  },

  methods: {
    /**
     * 获取商品列表数据
     */
    getData() {
      // 更新导航栏激活状态
      this.$store.commit("updateActiveIndex", "1");

      // 调用接口获取分页数据
      selectAllPage({
        keys: this.searchValue, // 搜索关键词
        pageNum: this.goodsCount2, // 当前页码
      }).then((res) => {
        if (res.flag === true) {
          this.goods = res.data.list; // 存储商品列表
          this.total = res.data.total; // 存储总数据量
        } else {
          console.log(res); // 打印错误信息
        }
      });
    },

    /**
     * 获取热门信息数据（取前10条）
     */
    getTopicData() {
      // 调用接口获取全部商品数据（默认第一页）
      selectGoodsPage({
        pageNum: '1', // 固定获取第一页
        keys: '' // 无搜索条件
      }).then((res) => {
        if (res.flag === true) {
          const tmp = res.data.list; // 临时存储数据
          // 过滤前10条数据
          tmp.forEach((item, index) => {
            if (index < 10) {
              this.goodsTopics.push(item);
            }
          });
        } else {
          console.log(res); // 打印错误信息
        }
      });
    },

    /**
     * 分页组件页码变化回调
     * @param {Array} item - 当前页商品数据
     */
    pageClick(item) {
      this.goods = item; // 更新商品列表
    },

    /**
     * 发布信息按钮点击处理
     */
    toPublish() {
      // 检查用户登录状态
      if (localStorage.getItem('token')) {
        // 已登录：跳转至发布商品页面
        this.$router.push("/home/addmessage/publishgoods").catch((err) => err);
      } else {
        // 未登录：跳转至登录页
        this.$router.push(`/login`).catch((err) => err);
      }
    },

    /**
     * 搜索事件处理
     * @param {string} val - 搜索关键词
     */
    handleSearch(val) {
      this.searchValue = val; // 更新搜索关键词
      this.getData(); // 重新获取数据
    },

    /**
     * 热门信息点击处理
     * @param {Object} item - 点击的信息项
     */
    handleDetail(item) {
      // 更新Vuex中的订单ID
      this.$store.commit("updateOrderId", item.orderId);
      // 跳转至详情页
      this.$router.push(`/home/details?orderId=${item.orderId}`).catch((err) => err);
    }
  },

  components: {
    Pagination, // 分页组件
    GoodsSource2, // 商品展示组件
  },
};
</script>

<style lang="less" scoped>
.front-page-container {
  display: flex; // 弹性布局
  flex-direction: row; // 横向排列
  justify-content: space-between; // 两端对齐
  width: 1100px;
  margin: 10px auto;
}

.front-page {
  width: 780px;
  margin: 0 auto;
}

.item-info {
  line-height: 25px;
  cursor: pointer;

  // 鼠标悬停样式
  &:hover {
    color: #75a981;
    text-decoration: underline; // 下划线
  }
}

.right-info {
  padding: 10px 20px; // 内边距
  height: 1000px;
  width: 300px;
  min-height: 360px;
  background-color: #d1d7dc;

  .free-btn {
    text-align: center;
    cursor: pointer;
  }

  .top-info {
    font-size: 12px;
    margin-top: 20px;
  }
}
</style>